<template>
  <div id="abc">
    <ul class="items">
      <li
        class="item"
        v-for="item of worlds"
        :key="item"
        :ref="item"
        @click="abcClick"
        @touchstart="tstart"
        @touchmove="tmove"
        @touchend="tend"
      >
        {{item}}
      </li>
    </ul>
  </div>
</template>

<script>
export default{
  name: 'abc',
  data () {
    return {
      oY: 0,
      timer: null
    }
  },
  props: {
    abc: Object
  },
  updated () {
    this.oY = this.$refs['A'][0].offsetTop
  },
  computed: {
    worlds () {
      const worlds = []
      for (let key in this.abc) {
        worlds.push(key)
      }
      return worlds
    }
  },
  methods: {
    abcClick (e) {
      this.$emit('abcChange', e.target.innerText)
    },
    tstart (e) {
      this.istouch = true
      this.$emit('abcChange', e.target.innerText)
    },
    tmove (e) {
      if (this.istouch) {
        if (this.timer) {
          clearTimeout(this.timer)
        }
        this.timer = setTimeout(() => {
          const tY = e.touches[0].clientY - 72
          const index = Math.floor((tY - this.oY) / 20)
          if (index >= 0 && index < this.worlds.length) {
            this.$emit('abcChange', this.worlds[index])
          }
        }, 16)
      }
    },
    tend () {
      this.istouch = false
    }
  }
}
</script>

<style lang="stylus" scoped>
@import '~stylee/stylus'
  #abc
    display flex
    flex-direction column
    justify-content center
    line-height: 20px;
    font-size: 14px;
    position absolute
    top: 72px;
    right: 0;
    bottom: 0;
    width: 20px;
  .item
    color $bgColor
    text-align center
</style>
